<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>车间品类总工序</title>
    <meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." />
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
    <script src="./assets/js/go.js"></script>
    <script src="./assets/js/RoundedRectangles.js"></script>
</head>
<body >

<div class="buttonGroup1 loading">
    <div class="box">
        <div class="item" data-index="big"></div>
        <div class="item" data-index="small"></div>
        <div class="item" data-index="lock"></div>
        <div class="item hidden" data-index="save"></div>
    </div>
</div>

<div class="radmenu loading" id="contextMenu" hidden></div>

<div id="sample">
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:100%;"></div>
</div>


<script src="./assets/js/require.js" charset="utf-8"></script>
<script>
    require.config({
        baseUrl:"./assets/",
        urlArgs:function(url,moduleName){
            return Math.random(); // "1.0.1"; //
        },
        shim: {
            "js/flow": {
                deps:["js/view"]
            }
        },
        map: {
            '*': {
                '$css': 'js/require.css'
            }
        }
    });

    require([
        "js/flow",
        "js/view",
        "js/dialog",
        "$css!css/index"
    ],function(){
        $(".loading").removeAttr("hidden");
        $("body").on('click','[data-index]',function(e){
            var target = e.currentTarget;
            var type = target.getAttribute("data-index");
            Dialog.hideMenu();
            if(!type){
                type = target.parentElement.getAttribute("data-index");
            }
            switch (type){
                case "big":{
                    myDiagram.scale += 0.1;
                }
                    break;
                case "small":{
                    if(myDiagram.scale>0.15){
                        myDiagram.scale -= 0.1;
                    }
                }
                    break;
                case "save":{
                    //if(target.classList.contains("hidden")){return;}
                    $.API.save();
                }
                    break;
                case "lock":{
                    var noLock = target.classList.contains("active");
                    var elSave = $(".item[data-index='save']")[0];
                    if(noLock){// 锁
                        elSave.className = "item hidden";
                        target.classList.remove("active");
                        myDiagram.isReadOnly = true;
                    }else{// 开锁
                        elSave.className = "item";
                        target.classList.add("active");
                        myDiagram.isReadOnly = false;
                    }
                }
                    break;
                default:
                    break;
            }
        })

        $("#theme").on("change",'',function(){
            $.API.theme(this.value);
        })

        $.API.init();
        $.API.load();
        //
        function lockWeb(time){
            time || (time = 3000);
            clearTimeout(lockWeb.timer);
            lockWeb.timer = setTimeout(function(){
                lockWeb();
            },time);
            //
            if(lockWeb.count == 1){
                var elLock = $(".item[data-index='lock']")[0];
                if(!elLock.classList.contains("active")){// 未操作
                    $(".buttonGroup1").css({top:"-180px"});
                }
            }else{
                $(".buttonGroup1").css({top:"10px"});
                lockWeb.count = 1;
            }
        }
        function lockWebEvent(){
            lockWeb();
            lockWeb.count++;
        }
        lockWeb.count = 1;
        document.body.onmousemove = lockWebEvent;
        document.addEventListener('mousewheel', lockWebEvent, true);
        document.addEventListener('DOMMouseScroll', lockWebEvent, true);
    })
</script>
</body>
</html>
